<template>
  <div class="greetings" v-html="name"></div>
  
  <div :class="change_colors" :style="{'background-color':mr_color}" @click="setcolor">
    {{ TXT }}
  </div>
  
  <div>
    <button @click="add">开</button>
    <span :style="{'fontSize': '20px'}">{{ value }}</span>
  </div>
  
  <div>
    <div v-for="(item, index) in randomValues" :key="index">
      <span v-if="item === 0">
        <span>JJ爆：{{ item }}</span>
      </span>
      <span v-else-if="item === 1">
        <span>FF公主：{{ item }}</span>
      </span>
      <span v-else-if="item === 2">
        <span>MH老师：{{ item }}</span>
      </span>
      <span v-else-if="item === 3">
        <span>CR王子：{{ item }}</span>
      </span>
      <span v-else-if="item === 4">
        <span>DD小：{{ item }}</span>
      </span>
    </div>
    <div :class="size_change" v-for="(iten,index) in obj" :key="index">
      <span>{{iten.name}}：{{iten.age}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello World!',
      TXT: "好好学习，天天向上",
      name: '<h1>Hello World!</h1>',
      colors: ['red', 'green', 'blue'],
      mr_color: 'red',
      value: 0,
      change_colors: 'some-class', // 定义缺失的属性
      randomValues: [], // 存储随机值
      size_change:'size',
      obj:{
        "jjb":{
          name: 'JJ',
          age: 18,
          sex: '男'
        },
        "ffgz":{
          name: 'FF',
          age: 18,
          sex: '女'
        },
        "mhls":{
          name: 'MH',
          age: 18,
          sex: '男'
        },
        "crzj":{
          name: 'CR',
          age: 18,
          sex: '男'
        },
        "ddx":{
          name: 'DD',
          age: 18,
          sex: '女'

        }
        }
      }
    },
  methods: {
    setcolor(){
      this.mr_color = this.colors[Math.floor(Math.random() * this.colors.length)];
    },
    add(){
      this.value++;
      if(this.value == 5){
        this.value = 0;
      }
      // 生成随机值
      this.generateRandomValues();
    },
    generateRandomValues() {
      // 生成4个0-4的随机数
      this.randomValues = Array.from({length: 4}, () => 
        Math.floor(Math.random() * 5)
      );
    }
  },
  mounted() {
    // 组件挂载时初始化随机值
    this.generateRandomValues();
  },
  computed: {
    // 获取当前值对应的图标
    currentIcon() {
      return this.icons[this.value];
    }
  },
}
</script>
<style scoped>
.some-class {
  color: red;
}
.size{
  font-size: 50px;
}
</style>